<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加操作</title>
    <script>
        function f1(){
            let a = document.getElementById("a");
            // 点击超链接之后,在超链接现有标签体内容的基础上追加一个div
            // div中内容为Hello World
            // 由于此时页面中压根就没有这个div
            // 因此,需要在DOM中创建一个div
            // 在DOM中创建节点时要区分是元素节点还是文本节点
            // 元素节点:对应的HTML标签
            // 文本节点:对应的是HTML标签体的文本内容

            // 1.创建一个div的元素节点
            let d = document.createElement("div");
            // 2.创建一个文本节点,节点内容为Hello World
            let text = document.createTextNode("Hello World");

            // 3.将创建的文本节点添加到创建的元素节点中
            // 将指定节点text追加到指定节点d的标签体的末尾
            d.appendChild(text);

            // 4.将新生成的div追加到超链接的标签体的末尾
            // a.appendChild(d);

            // 将新生成的div追加到超链接的后面
            // 即:追加到body的标签体的末尾
            let b = document.getElementById("b");
            // b.appendChild(d);

            // 将新生成的div添加到超链接之前
            // b.insertBefore(d,a);

            // 使用新生成的div替换原有的超链接
            b.replaceChild(d,a);
        }
    </script>
</head>
<body id="b">

<a id="a" href="javascript:;" onclick="f1()">
    超链接
</a>
</body>
</html>